為什麼需要 Server Components?

React Server Components 的誕生是為了進一步提升效能和使用者體驗，解決前端開發中的常見問題：

1. 使用者體驗 : 取得資料的過程能會按照不同的速度回傳，導致畫面更新順序不一，這會讓使用者感到體驗不一致，出現畫面閃爍或資料部分載入的情況。
2. 更容易維護: 當需要在 Client 端抓取資料，並將資料一層一層地透過 props 傳遞時，會使程式碼變得複雜且難以維護。
3. 效能優化 : 元件從上到下渲染，獲取資料會產生 Waterfall 。
4. 減少 JavaScript bundle: 現有的方式會將大量的 JavaScript 傳送到瀏覽器，增加了 bundle 的大小，進而影響頁面的加載速度。

這些問題都有各自的解決方案，但 React Server Components 的引入，則提供了一個新的選擇。

Serve Components 是怎麼運作的?

Server Components 是在伺服器端生成 React 元件，然後將這些元件的輸出結果用一個特殊格式傳送到客戶端，用來產生 HTML。實際上運作會更複雜，這邊只是簡單的說明。

Server Components 的功能和好處

• Code Splitting : Server Components 可以透過編譯將不需要在 Client 端執行的 JavaScript，而是留在 Server 端，減少 Client 端的 JavaScript bundle size，進而提升效能。
• 更快的資料獲取 : 因為 Server Components 更靠近資料來源（例如資料庫、API 等），資料獲取可以更快速，減少延遲。
• 減少 JavaScript 負擔 : Server Components 不會被傳送到 Client 端執行，因此可以減少最終送到瀏覽器的 JavaScript bundle，提升效能。
• 安全性 : Server Components 只會在 Server 端執行，敏感資料（如 API 金鑰或其他資料）可以避免被暴露到 Client 端。
• 使用 Server 資源 : Server Components 可以輕鬆存取 Server 資源，如檔案系統（fs）、資料庫等，這讓處理資料變得更加簡單高效。
• 更好的 SEO : 因為是回傳 HTML，因此可以提升 SEO。

如何使用 Server Components

在 React 19 使用 Server Components 是穩定的，但 bundlers 和框架底層架構還是有機會改變，建議使用特定的 React 版本或使用 Canary 版本。

Server Components 的關鍵是使用 Async Component，透過 Async Component 可以在 render 的過程中使用 await 來取得資料。

使用範例如下:

export default async function Page() {
  const res = await fetch("https://api.example.com/users");
  const users = res.json();
  return (
    <>
      <h1>Users</h1>
      {users.map((user) => (
        <div key={user.id}>
          <h2>{user.name}</h2>
          <p>{user.email}</p>
        </div>
      ))}
    </>
  );
}

這也是除了之前介紹的 fetch 資料的方式外，另一種 Server Components 專屬的方式。

如果 Server Component 重新取得資料，並不會有任何閃爍的畫面。如果在資料抓取時需要顯示 loading 畫面，可以搭配 React 的 Suspense 進行處理。

Server Components 和 Server Side Rendering

雖然名稱相似，但 Server Components 和 Server Side Rendering 是兩個完全不同的概念。

• Server Side Rendering (SSR): 將原始的 HTML 從伺服器發送到客戶端，並下載整個 Client-side 的 JavaScript 來進行 Hydration，將靜態 HTML 轉換成互動式 React 應用。SSR 強調的是頁面的初次渲染過程。
• Server Components: 永遠在伺服器端渲染。另外，即便重新抓取資料，Client 端的狀態也會保持一致。與 SSR 不同的是，Server Components 的邏輯是封裝在伺服器端的，不會與客戶端混合。

兩者可以同時使用，也可以根據需求選擇。

Client Component

Client Components 就是我們一般在 React 中最常用的 Component，負責處理使用者交互及瀏覽器特有的功能。

在 Server Component 沒有辦法使用以下內容:

• React Hooks（如 useState, useEffect）
• browser-only APIs (window、localStorage 等)
• 事件處理（如 onClick 等）
• 不支援 Server Component 的第三方套件

這時候就需要使用 Client Component。

之後會介紹 Server Components 與 Client Components 的整合，有機會也會介紹到 Server Components 的內部運作原理。

參考資料:
https://www.youtube.com/watch?v=TQQPAU21ZUw
https://react.dev/reference/rsc/server-components
https://typeofnan.dev/what-is-the-difference-between-ssr-and-react-server-components/